import React from 'react'

type Props = {
    userinfo: {
        name: string,
        age: number
    },
    changeuserinfoFn(e: any): void
}

// 如下语法: 是最新的ts语法: 比较方便简单

// export default function Myfunchild(props: Props) {

//     return (
//         <div>
//             我是函数子组件
//             <p>{props.userinfo.name}---{props.userinfo.age}</p>
//             <p>
//                 <input type="text" onChange={(e) => {
//                     props.changeuserinfoFn(e)
//                 }} />
//             </p>
//         </div>
//     )
// }

// 以前的ts 函数组件的写法
// Props 为props的数据类型
const Myfunchild: React.FC<Props> = (props) => {
    return (
        <div>
            我是函数子组件
            <p>{props.userinfo.name}---{props.userinfo.age}</p>
            <p>
                <input type="text" onChange={(e) => {
                    props.changeuserinfoFn(e)
                }} />
            </p>
        </div>
    )
}
export default Myfunchild